import React, { useState } from 'react';
import { Tooltip, Button, message } from 'antd';
import { StarOutlined, StarFilled } from '@ant-design/icons';
import request from '@/utils/request';
import { FormattedMessage } from 'umi';

export interface QuickMenuProps {
  path?: string;
  icon: string;
  title: any;
  dataStep?: string;
  dataIntro?: string;
}
const QuickMenu: React.FC<QuickMenuProps> = (props: QuickMenuProps) => {
  const [exist, setExist] = useState<boolean>(false);
  const [menuObj, setMenuObj] = useState<any>();
  const setQuickMenu = (item: any) => {
    console.log(item);

    request('/api/services/app/Module/AddUserFavMenu', {
      method: 'POST',
      data: {
        description: item.title,
        modulePath: item.path,
        moduleType: 'FavMenu',
        logo: item.icon,
      },
    }).then((response) => {
      if (response && response.success) {
        message.success('添加成功');
        setExist(true);
      }
    });
  };
  const delQuickMenu = () => {
    request('/api/services/app/Module/Delete', {
      method: 'DELETE',
      params: {
        id: menuObj?.id,
      },
    }).then((response) => {
      message.success('删除成功');
      setExist(false);
      setMenuObj(null);
    });
  };
  const fetchData = () => {
    request('/api/services/app/Module/CheckFavMenu', {
      method: 'POST',
      data: {
        moduleType: 'FavMenu',
        modulePath: props.path,
      },
    }).then((response) => {
      if (response.success && response.result) {
        setExist(true);
        setMenuObj(response.result);
      } else {
        setExist(false);
      }
    });
  };
  React.useEffect(() => {
    fetchData();
  }, []);
  return (
    <Tooltip title={<FormattedMessage id="Favorite Menu" />}>
      {exist ? (
        <Button
          type="link"
          icon={<StarFilled />}
          danger
          onClick={() => delQuickMenu()}
          data-step={props.dataStep}
          data-intro={props.dataIntro}
        />
      ) : (
        <Button
          type="link"
          icon={<StarOutlined />}
          onClick={() => setQuickMenu(props)}
          data-step={props.dataStep}
          data-intro={props.dataIntro}
        />
      )}
    </Tooltip>
  );
};
export default QuickMenu;
